<!--
  文件描述：节点组件
  nodeType： 0发起人 、1中间节点人 、2条件 、3具体条件
-->
<template>
  <div :class="['node', processData.nodeType === '1' ? 'approveNode' : '']">
    <!--  名称，详情  -->
    <div class="node-box">
      <div class="node-box-title"
        :style="{ background: processData.nodeType === '0' ? '#909399' : '#409EFF' }">
        <div class="ellipsis-text">{{ processData.nodeType === '0' ? '发起人' : '审批人' }}</div>
        <el-icon size="20" class="title-icon" @click="deleMe"
          :style="{ display: processData.nodeType === '0' ? 'none' : '' }">
          <Close />
        </el-icon>
      </div>
      <div class="node-box-dec" @click="drawer = true">
        <div class="ellipsis-text">{{ processData.nodeNm }}</div>
        <el-icon>
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <!--  按钮以及线  -->
    <add-node-btn :process-data="processData" />
  </div>
  <el-drawer
      v-model="drawer"
      title="审批人配置"
      append-to-body
      :size="$isMobile() ? '80%' : '30%'"
  >
    <el-form label-width="auto">
      <el-form-item label="节点名称：">
        <el-input clearable v-model="processData.nodeNm" placeholder="请输入节点名称" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="节点退回策略：" v-if="processData.nodeType === '1'">
        <el-radio-group v-model="processData.backStrategy">
          <el-radio value="0">退回到第一节点</el-radio>
          <el-radio value="1">退回到上一节点</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审批人类型：">
        <el-radio-group v-model="processData.assigneeType" @change="selectAssigneeType">
          <el-radio value="0">指定人</el-radio>
          <el-radio value="1">指定角色和部门</el-radio>
          <el-radio value="2">指定角色</el-radio>
          <el-radio value="3">指定部门</el-radio>
          <el-radio value="4">直属上级领导</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择用户：" v-if="processData.assigneeType === '0'">
        <el-select clearable filterable v-model="processData.assigneeValue" placeholder="请选择用户" style="width: 200px">
          <el-option v-for="item in usersOptions" :key="item.userId" :label="item.username" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择角色：" v-if="processData.assigneeType === '2' || processData.assigneeType === '1'">
        <el-select clearable filterable v-model="roleId" placeholder="请选择角色" @change="selectAssigneeValue"
          style="width: 200px">
          <el-option v-for="item in rolesOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择部门：" v-if="processData.assigneeType === '3' || processData.assigneeType === '1'">
        <el-tree-select clearable v-model="deptId" :data="deptsOptions" check-strictly :render-after-expand="false"
          placeholder="请选择部门" :props="{
            children: 'children',
            label: 'deptName',
            value: 'deptId'
          }" @change="selectAssigneeValue" style="width: 200px" />
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script setup name="nodePage">
import { ref, onMounted } from 'vue';
import api from "@/api"
import { getCacheWithExpiry, setCacheWithExpiry } from "@/utils/busi"
import addNodeBtn from '@/view/workflow/config/components/comp/add-node-btn.vue'
import { inject } from "vue";
const props = defineProps(['processData'])

const drawer = ref(false)
const usersOptions = ref([])
const rolesOptions = ref([])
const deptsOptions = ref([])
const roleId = ref()
const deptId = ref()
// 触发祖组件提供的方法
const deleData = inject('deleData')
const deleMe = () => {
  deleData?.({
    nodeId: props.processData.nodeId
  })
}

const getUsers = async () => {
  let options = getCacheWithExpiry('wfUsersOptions')
  if (!options) {
    const res = await api.get('/author/user/pageList', { pageNum: 1, pageSize: 999 })
    if (res.data.code === 200) {
      options = res.data.data.records
      setCacheWithExpiry('wfUsersOptions', options, 600000)
    } else {
      ElMessage.error(res.data.msg)
    }
  }
  usersOptions.value = options
}

const getRoles = async () => {
  let options = getCacheWithExpiry('wfRolesOptions')
  if (!options) {
    const res = await api.get('/author/role/pageList', { pageNum: 1, pageSize: 999 })
    if (res.data.code === 200) {
      options = res.data.data.records
      setCacheWithExpiry('wfRolesOptions', options, 600000)
    } else {
      ElMessage.error(res.data.msg)
    }
  }
  rolesOptions.value = options
}

const getDeptsOptions = async () => {
  let options = getCacheWithExpiry('wfDeptsOptions')
  if (!options) {
    const res = await api.get('/author/dept/treeData')
    if (res.data.code === 200) {
      options = res.data.data
      setCacheWithExpiry('wfDeptsOptions', options, 600000)
    } else {
      ElMessage.error(res.data.msg)
    }
  }
  deptsOptions.value = options
}

const selectAssigneeValue = () => {
  if (roleId.value && deptId.value) {
    props.processData.assigneeValue = roleId.value + ',' + deptId.value
  } else if (roleId.value) {
    props.processData.assigneeValue = roleId.value
  } else {
    props.processData.assigneeValue = deptId.value
  }
}

const selectAssigneeType = (type) => {
  props.processData.assigneeValue = null
  roleId.value = null
  deptId.value == null
  initAssignee(type)
}

const initAssignee = (type) => {
  if (type === '0') {
    getUsers()
  } else if (type === '1') {
    let params = {}
    if (props.processData.assigneeValue) {
      const assignee = props.processData.assigneeValue
      const assigneeArr = assignee.split(',')
      roleId.value = assigneeArr[0]
      deptId.value = assigneeArr[1]
      params = { roleId: assigneeArr[0] }
    }
    getRoles()
    getDeptsOptions()
  } else if (type === '2') {
    roleId.value = props.processData.assigneeValue
    getRoles()
  } else {
    deptId.value = props.processData.assigneeValue
    getDeptsOptions()
  }
}

onMounted(() => {
  if (props.processData.assigneeType) {
    initAssignee(props.processData.assigneeType)
  }
})
</script>
<style scoped lang="less">
@import '@/view/workflow/config/components/index.less';
</style>